<template>
  <div class="TableComponent">
    <!--input搜索-->
    <div class="table-top flexRBC">
      <div class="flexRSC">
        <el-input
          v-model="searchInput"
          size="small"
          placeholder="请输入分类名称搜索"
          class="input-width-200"
          style="margin-right: 10px"
        />
        <el-button
          type="primary"
          round
          size="small"
          style="margin-bottom: 0"
          @click="searchBtn"
        >查 询</el-button>
      </div>
      <el-button
        v-if="
          !$store.getters.banBtnList.includes('BTN_DEPOSIT_GOODS_CATEGORY_ADD')
        "
        type="primary"
        round
        size="small"
        @click="addCategory"
      >新增分类</el-button>
    </div>
    <!--table-->
    <div class="list-table">
      <el-table
        v-loading="tableLoading"
        :data="list"
        border
        stripe
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="categoryName"
          label="分类名称"
          min-width="150px"
        />
        <el-table-column prop="number" label="物品数" min-width="150px">
          <template slot-scope="scope">
            <div class="flexRSC">
              <h2 style="margin-right: 15px">{{ scope.row.number }}</h2>
              <h2
                v-if="scope.row.number"
                style="color: #4d82f3; cursor: pointer"
                @click="goodsToLook(scope.row)"
              >
                查看
              </h2>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          min-width="150px"
        />
        <el-table-column
          label="操作"
          align="center"
          width="150px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              v-if="
                !$store.getters.banBtnList.includes(
                  'BTN_DEPOSIT_GOODS_CATEGORY_EDIT'
                )
              "
              size="small"
              type="text"
              @click="editBtn(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="
                !$store.getters.banBtnList.includes(
                  'BTN_DEPOSIT_GOODS_CATEGORY_DELETE'
                )
              "
              type="text"
              size="small"
              @click="listItemDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <pagination-direction
        v-if="paginationConfig.total!==0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      ></pagination-direction>-->
    </div>
    <ClassificationDialogInput
      ref="ClassificationDialogInput"
      @emitDialogSave="emitDialogSave"
    />
  </div>
</template>

<script>
import ClassificationDialogInput from './ClassificationDialogInput.vue'
export default {
  components: {
    ClassificationDialogInput
  },
  data() {
    return {
      searchInput: '', // 搜索输入
      pageForm: {},
      shopId: 0,
      // 配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 1,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      tableLoading: false, // 表格loading
      searchLoading: false, // 搜索btn loading
      shopName: '',
      // 数据
      list: [], // 表格数据
      filterForm: {
        // 筛选数据
        name: '',
        serial: ''
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    /* 数据请求*/
    // 获取门店数据
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入page
      this.filterForm.pageNum = page
      this.filterForm.pageSize = pageSize
      this.filterForm.name = this.searchInput

      const params = Object.assign({ shopId: this.shopId }, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      const data = params
      this.tableLoading = true
      this.khReqMethod({
        url: '/depositAdmin/config/goodsCategory',
        data,
        method: 'get',
        isParams: true
      }).then((res) => {
        this.tableLoading = false
        this.searchLoading = false
        this.list = res.data
        // this.paginationConfig.total = res.data.total;
        // this.paginationConfig.page = res.data.pageNum;
      })
    },
    /* 按钮点击*/
    addCategory() {
      const parentData = {
        dialogTitle: '新增分类'
      }
      this.$refs.ClassificationDialogInput.dialogShow(parentData)
    },
    goodsToLook(row) {
      this.$emit('goodNumActive', row.categoryName)
    },
    editBtn(row) {
      const parentData = {
        dialogTitle: '编辑分类',
        rowItem: JSON.parse(JSON.stringify(row))
      }
      this.$refs.ClassificationDialogInput.dialogShow(parentData)
    },
    listItemDelete(row) {
      // 删除
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteGoodsCategory(row)
      })
    },
    searchBtn() {
      console.log('2e423434')
      this.initData()
    },
    // 添加商品
    postGoodsCategory(pageForm) {
      const data = Object.assign({ shopId: this.shopId }, pageForm)
      this.khReqMethod({
        url: '/depositAdmin/config/goodsCategory',
        data,
        method: 'post',
        isLoading: true
      }).then((res) => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          // 重新刷新数据
          this.initData()
        }
      })
    },
    // 删除商品
    deleteGoodsCategory(row) {
      const data = {
        id: row.id,
        shopId: this.shopId
      }
      console.log(data)
      this.khReqMethod({
        url: '/depositAdmin/config/goodsCategory',
        data,
        method: 'delete',
        isLoading: true,
        isParams: true
      }).then((res) => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          // 重新刷新数据
          this.initData()
        }
      })
    },
    /* other*/
    emitDialogSave(pageForm) {
      this.postGoodsCategory(pageForm)
      console.log(pageForm)
    },

    /* 分页*/
    sizesChange() {
      this.initData()
    },
    pageChange() {
      this.initData()
    },
    /* 控制显示的隐藏*/
    componentActive(passData) {
      console.log('componentActive')
      console.log(passData)
      this.shopId = passData.shopId
      this.initData()
    }
  }
}
</script>

<style scoped lang="scss">
  .table-top {
    margin-bottom: 10px;
  }
</style>
